<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../_layui/模板项目/layuiadmin/layui/css/admin.css">
    <link rel="stylesheet" href="../../_layui/模板项目/layuiadmin/layui/css/layui.css">
    <style>
        div.mymsg>div.layui-layer-content {
            padding: 0;
            overflow: hidden;
        }

        div.mymsg {
            /* max-width: 80vw; */
            width: auto !important;
        }
    </style>
</head>

<body>
    <a style="padding-right: 20px;" href="https://blog.csdn.net/vieri_32/article/details/48345023">理解AES加密解密的使用方法</a>
    <a style="padding-right: 20px;" href="https://www.jianshu.com/p/a47477e8126a">前端 crypto-js aes 加解密</a>
    <a style="padding-right: 20px;" href="https://www.cnblogs.com/wz122889488/p/6899615.html">CryptoJS与C#AES加解密互转</a>

    <hr style="border: 1px solid #dddddd;">

    <div style="display: flex; justify-content: space-around; margin: 10px;">
        <div class="layui-form-item layui-col-xs5 layui-col-sm5 layui-col-md5">
            <label class="layui-form-label">key</label>
            <div class="layui-input-block">
                <input type="password" name="key" required lay-verify="required" placeholder="十六位十六进制数作为密钥"
                    autocomplete="off" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item layui-col-xs5 layui-col-sm5 layui-col-md5">
            <label class="layui-form-label">iv</label>
            <div class="layui-input-block">
                <input type="password" name="iv" required lay-verify="required" placeholder="十六位十六进制数作为密钥偏移量"
                    autocomplete="off" class="layui-input" value="">
            </div>
        </div>
    </div>

    <hr style="border: 1px solid #dddddd;">

    <div style="display: flex; justify-content: space-around; margin: 10px;">
        <div class="layui-card layui-col-xs5 layui-col-sm5 layui-col-md5" style="height:100%">
            <div class="layui-card-header">加密</div>
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码等级</label>
                        <div class="layui-input-block">
                            <select name="grade" lay-verify="required">
                                <!-- <option value=""></option> -->
                                <!-- <option value="number">纯数字</option>
                                <option value="letter">纯字母</option>
                                <option value="numberAndLetter">数字+字母</option>
                                <option value="Case">区分大小写</option>
                                <option value="special">特殊字符</option> -->
                                <option value="纯数字">纯数字</option>
                                <option value="纯字母">纯字母</option>
                                <option value="数字+字母">数字+字母</option>
                                <option value="区分大小写">区分大小写</option>
                                <option value="特殊字符">特殊字符</option>
                                <option value="abc">敏感密码</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="text" name="password" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">密文</label>
                        <div class="layui-input-block">
                            <textarea disabled name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="button" id="btnCopy"
                                class="layui-btn layui-btn-primary cloneDesc">复制密文</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card layui-col-xs5 layui-col-sm5 layui-col-md5" style="height:100%">
            <div class="layui-card-header">解密</div>
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">密文</label>
                        <div class="layui-input-block">
                            <textarea name="ciphertext" placeholder="请输入内容" lay-verify="required"
                                class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <!-- <button type="reset" class="layui-btn layui-btn-normal">输入剪切板内容</button> -->
                            <button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
                            <button type="button" class="layui-btn layui-btn-primary">复制密码</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script src="../../js/crypto-js.4.0.0.js"></script>
    <script>
        // const CryptoJS = require('crypto-js');  //引用AES源码js

        // const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥      1234123412ABCDEF
        // const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数作为密钥偏移量  ABCDEF1234123412   
        var key, iv

        //解密方法
        function Decrypt(word) {
            let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
            let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
            let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
            let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
            return decryptedStr.toString();
        }

        //加密方法
        function Encrypt(word) {
            let srcs = CryptoJS.enc.Utf8.parse(word);
            let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
            return encrypted.ciphertext.toString().toUpperCase();
        }

        // export default {
        //     Decrypt,
        //     Encrypt
        // }
    </script>
    <script src="../../_layui/模板项目/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../_layui/模板项目/layuiadmin/modules/'
        }).extend({
            // index: 'lib/index', //主入口模块
            select2: 'select2', //主入口模块
            timemsg: 'timemsg', //主入口模块
        }).use(['jquery', 'form', 'laydate', 'element', 'select2', 'timemsg'], function () {
            var $ = layui.jquery
            var form = layui.form
            var laydate = layui.laydate
            var select2 = layui.select2

            function genGuid() {
                //生成 网络请求 Id 
                return 'xyyxxxyx'.replace(/[xy]/g, function (c) {
                    let r = Math.random() * 16 | 0,
                        v = c == 'x' ? r : (r & 0x3 | 0x8);
                    return v.toString(16); //16进制
                });
            }

            //监听提交-加密
            form.on('submit(formDemo)', function (data) {
                if (!$('[name="key"]').val().trim() || !$('[name="iv"]').val().trim()) {
                    layui.timemsg.open("输入 key 或 iv")
                    return false;
                }
                try {
                    if (data.field["grade"] == 'abc') data.field["grade"] = genGuid()

                    var field = `${data.field["password"]},${data.field["grade"]}`;
                    // layer.msg(JSON.stringify(data.field, true, 4)); 

                    key = CryptoJS.enc.Utf8.parse($('[name="key"]').val())
                    iv = CryptoJS.enc.Utf8.parse($('[name="iv"]').val())

                    var desc = Encrypt(JSON.stringify(field))
                    console.log('==', data.field, key, iv, desc)

                    // $('[name="desc"]').val(desc)
                    $('[name="ciphertext"]').val($('[name="desc"]').val(desc).val())
                } catch (e) {
                }
                return false;
            });

            //监听提交-解密
            form.on('submit(formDemo2)', function (data) {
                if (!$('[name="key"]').val().trim() || !$('[name="iv"]').val().trim()) {
                    layui.timemsg.open("输入 key 或 iv")
                    return false;
                }
                try {
                    // layer.msg(JSON.stringify(data.field));
                    key = CryptoJS.enc.Utf8.parse($('[name="key"]').val())
                    iv = CryptoJS.enc.Utf8.parse($('[name="iv"]').val())

                    var result = Decrypt(data.field.ciphertext)
                    console.log('==', result)
                    var password = JSON.parse(result).split(',')


                    var html = `<div id="mas" style=""> <p id="grade"> 密码等级:${password[1]}</p> <p id="password"> 密码:${password[0]}</p> </div>`
                    layui.timemsg.open(html)
                    window._password = password.password;
                } catch (e) {
                    layui.timemsg.open("输入正确的 key/iv/密文")
                }

                return false;
            });

            $(".cloneDesc").click(function () {
                // console.log('', $('[name="desc"]').val())
                $('[name="ciphertext"]').val($('[name="desc"]').val())
            })
        })

    </script>
</body>

</html>